<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>腾冲市旅游景区游客接待情况统计表</title>
    <style type="text/css">
        td, th {
            padding: 10px;
        }

        .total_result{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="content-wrapper">
    <h3>腾冲市旅游景区游客接待情况统计表</h3>
    <div class="panel panel-default">
        <div class="panel-body ">
            <div class="form-inline">
                <div class="form-group" style="float:right;">
                    <input id="tjx" type="text" placeholder="新增旅游景区项" class="form-control">
                    <button type="button" class="btn btn-warning" onclick="addTjx()"><i class="fa fa-tag"></i>添加旅游景区
                    </button>
                </div>
                <button type="button" class="btn btn-default" onclick="toSearch()"><i class="fa fa-search"></i>查询统计报表
                </button>
                <div class="btn-group">
                    <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-primary"
                            aria-expanded="false" onclick="loadTjx()"><i class="fa fa-plus"></i>添加统计数据
                        <span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu" id="ul_tjx">
                    </ul>
                </div>

            </div>
            <div id="div_tjjg" style="display: none;padding-top: 10px;">
                <form class="form-inline" id="form_tjjg">
                    <div class="form-group">
                        <input type="text" id="input_tjx" class="form-control" readonly/>
                        <input type="hidden" id="input_tjx_id" class="form-control"/>
                        <input type="text" id="input_tjtime" placeholder="统计日期" readonly
                               class="datepicker form-control validate[required]"/>
                        <input type="text" id="input_tjjg" placeholder="统计结果"
                               class="form-control validate[required,custom[integer]]"/>
                        <button type="button" class="btn btn-green" onclick="addTjsj()">保存统计结果</button>
                    </div>
                </form>
            </div>
            <div id="div_search" style="display: none;padding-top: 10px;">
                <form class="form-inline" id="form_search">
                    <div class="form-group">起始日期：
                        <input type="text" id="search_starttime" readonly
                               class="datepicker form-control validate[required,dateRange[grp1]]"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;结束日期：<input type="text" id="search_endtime" readonly
                                                            class="datepicker form-control validate[required,dateRange[grp1]]"/>
                        <button type="button" class="btn btn-green" onclick="startSearch()"><i class="fa fa-search"></i>开始查询
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="row" id="div_lyjqtable" style="display: none;">
        <button type="button" class="btn btn-success"
                onclick="exportToExcel()">导出到EXCEL
        </button>
        <table class="table table-bordered table-hover" id="lyjq_table">
            <thead id="lyjqTable_thead">
            </thead>
            <tbody id="lyjqTable_tbody">
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript" src="${ctx}/assets/tableExport.js"></script>
<%--<script type="text/javascript" src="${ctx}/assets/datatable/dataTables.tableTools.js"></script>--%>
<script type="text/javascript">
    var ctx = '${ctx}';
    var TJX_TYPE = 'lyjq';
    function loadTjx() {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: ctx + '/lyjq/listTjx.do',
            contentType: 'charset=utf-8',
            data: {type: TJX_TYPE},
            success: function (msg) {
                var data = msg.msg;
                if (data.length > 0) {
                    $('#ul_tjx').html('');
                    $.each(data, function (i) {
                        var tjx_i = data[i];
                        var tjx_id = tjx_i.id;
                        var tjx_name = tjx_i.name;
                        $('#ul_tjx').append('<li><a href="#" onclick="toAddTjsj(\'' + tjx_id + '\',\'' + tjx_name + '\')">添加【' + tjx_name + '】的统计数据</a></li>');
                    });
                }
            }
        })
    }
    function addTjx() {
        var tjx = $('#tjx').val();
        console.log(tjx);
        if (!tjx) {
            $.notify("请输入“新增旅游景区项”");
            return;
        }
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: ctx + '/lyjq/saveTjx.do',
            contentType: 'charset=utf-8',
            data: {name: tjx, type: TJX_TYPE},
            success: function (msg) {
                if (msg.msg == 'success') {
                    $.notify('添加景点成功！');
                } else {
                    $.notify(msg.msg);
                }
            }
        })
    }
    function toAddTjsj(id, name) {
        $('#input_tjx').val(name);
        $('#input_tjx_id').val(id);
        $('#div_tjjg').show();
    }
    function addTjsj() {
        if ($('#form_tjjg').validationEngine('validate')) {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: ctx + '/lyjq/saveTjjg.do',
                contentType: 'charset=utf-8',
                data: {tjxid: $('#input_tjx_id').val(), tjtime: $('#input_tjtime').val(), tjjg: $('#input_tjjg').val()},
                success: function (msg) {
                    if (msg.msg == 'success') {
                        $.notify('添加统计数据成功！');
                    } else {
                        $.notify(msg.msg);
                    }
                }
            })
        }
    }

    function toSearch() {
        if ($('#div_search').is(":visible")) {
            $('#div_search').hide();
        } else {
            $('#div_search').show();
        }
    }
    function startSearch() {
        if ($('#form_search').validationEngine('validate')) {
            $('#div_lyjqtable').show();
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: ctx + '/lyjq/startSearch.do',
                contentType: 'charset=utf-8',
                data: {type: TJX_TYPE, starttime: $('#search_starttime').val(), endtime: $('#search_endtime').val()},
                success: function (msg) {
                    $('#lyjqTable_thead').html('');
                    $('#lyjqTable_tbody').html('');
                    $('#lyjqTable_thead').append('<tr><th>日期</th></tr>');
                    var data_range = dataScope($('#search_starttime').val(), $('#search_endtime').val());
                    $.each(data_range, function (date_i) {
                        $('#lyjqTable_tbody').append('<tr><td>' + data_range[date_i] + '</td></tr>');
                    });
                    $('#lyjqTable_tbody').append('<tr><td><strong>合计</strong></td></tr>')

                    var tjsj_index = 0;
                    $.each(msg, function (tjxname) {
                        $('#lyjqTable_thead tr').append('<th>' + tjxname + '</th>');
                        var tjsjUnderTjx = msg[tjxname];
                        var tjsj_total_y=0;
                        $.each(tjsjUnderTjx, function (tjsj_i) {
                            var current_tr = $('#lyjqTable_tbody tr')[tjsj_i];
                            var tjsj = tjsjUnderTjx[tjsj_i];
                            $(current_tr).append('<td>' + tjsj.TJJG + '</td>');
                            tjsj_total_y=tjsj_total_y+tjsj.TJJG;
                        })
                        var tjtotal_tr= $('#lyjqTable_tbody tr')[tjsjUnderTjx.length];
                        $(tjtotal_tr).append('<td class="total_result">' + tjsj_total_y + '</td>');
                    })
                    $('#lyjqTable_thead tr').append('<th>合计</th>');
                    $.each($('#lyjqTable_tbody tr'),function(tr_i){
                        var tr=$('#lyjqTable_tbody tr')[tr_i];
                        var tjsj_total_x=0;
                        var tr_td=$(tr).find('td');
                        $.each($(tr_td),function(td_i){
                            if(td_i!=0){
                                var td=$(tr_td)[td_i];
                                tjsj_total_x=tjsj_total_x+$(td).html()*1;
                            }
                        })
                        $(tr).append('<td class="total_result">'+tjsj_total_x+'</td>');
                    })
                }
            })
        }

    }
    function exportToExcel(){
        tableExport('lyjq_table', '旅游景区游客接待情况统计表', 'xls');
    }

</script>
</body>
</html>
